<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="favicon.ico">
    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
    <script type="text/javascript" src="env-config.js"></script>
    <style>
      :root {
        --font-mono: 0.889em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
        --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        /*
          From https://www.modularscale.com/?1&rem&1.125 and https://type-scale.com/ -
          1.125 (8:9) factor: 1.424rem, 1.266rem, 1.125rem, 1rem, 0.889rem, 0.79rem
        */
        --font-percent-small: 88.9%;
        --font-percent-tiny: 79.0%;
        --font-size-base: 1rem;
        --font-size-h1: 1.424rem;
        --font-size-h2: 1.266rem;
        --font-size-h3: 1.125rem;
        --font-size-small: 0.889rem;
        --font-size-tiny: 0.79rem;

        --font-weight-bold: 600; /* semi */
        --font-weight-light: 200;
        --font-weight-normal: 400;

        --opacity-light: 0.6;

        --width-full: 1750px;
        --width-half: 875px;
        --width-shortaddr: 6.5em;
        --width-shorthash: 9em;

        --font-weight-header: var(--font-weight-normal);
        --font-size-label: var(--font-size-small);
        --font-weight-label: var(--font-weight-bold);
        --text-transform-label: lowercase;

        --bg-menu-hover: rgba(255, 255, 255, 0.2);
      }

      [data-theme="dark"] {
        --bg-identicon-circle: #282829;
        --bg-input: #38393f;
        --bg-input-error: #48393f;
        --bg-inverse: rgba(78, 78, 78, 0.66);
        --bg-menu: #26272c;
        --bg-page: #26272c;
        --bg-table: #3b3d3f;
        --bg-tabs: #38393f;
        --bg-toggle: #58595f;
        --bg-sidebar: #1a1b20;
        --bg-static-extra: rgba(200, 200, 200, 0.1);
        --border-identicon: transparent;
        --border-input: rgba(234, 236, 238, .15);
        --border-table: #343536;
        --border-tabs: #343536;
        --color-bounty-info: #8E8E8E;
        --color-checkbox: rgba(78, 78, 78, 0.66);
        --color-error: rgba(255, 83, 83, 0.8);
        /* --color-header: rgba(244, 242, 240, 0.8); */
        /* --color-label: rgba(244, 242, 240, 0.45); */
        /* --color-summary: rgba(244, 242, 240, 0.75); */
        /* --color-table-foot: rgba(254, 240, 240, 0.66); */
        /* --color-table-head: rgba(254, 240, 240, 0.8); */
        --color-text: rgba(244, 242, 240, 0.8);
        --opacity-gray: 0.1;
      }

      [data-theme="light"] {
        --bg-identicon-circle: #eee;
        --bg-input: #ffffff;
        --bg-input-error: #fff6f6;
        --bg-inverse: rgba(244, 242, 240, 0.91);
        --bg-menu: #ffffff;
        --bg-page: #f5f3f1;
        --bg-table: #ffffff;
        --bg-tabs: #ffffff;
        --bg-toggle: #e4e5e6;
        --bg-sidebar: #fafafa;
        --bg-static-extra: rgba(200, 200, 200, 0.1);
        --border-identicon: #ddd;
        --border-input: rgba(34, 36, 38, .15);
        --border-table: #efedeb;
        --border-tabs: #f1efed;
        --color-bounty-info: #4D4D4D;
        --color-checkbox: rgba(34, 36, 38, 0.15);
        --color-error: rgba(139, 0, 0);
        /* --color-header: rgba(78, 78, 78, 0.8); */
        /* --color-label: rgba(78, 78, 78, 0.66); */
        /* --color-summary: rgba(78, 78, 78, 0.66); */
        /* --color-table-foot: rgba(78, 78, 78, 0.66); */
        /* --color-table-head: rgba(78, 78, 78, 0.8); */
        --color-text: rgba(78, 78, 78, 0.8); /* 1 */
        --opacity-gray: 0.75;
      }

      .--absolute {
        position: absolute;
      }

      .--digits {
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
      }

      .--hidden {
        display: none;
      }

      .--relative {
        position: relative;
      }

      .--tmp {
        background: grey;
        filter: blur(2px);
        opacity: 0.15;
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="tooltips"></div>
    <script>
      if (window.self !== window.top) {
        window.top.location.href = window.location.href;
      }
    </script>
  </body>
</html>
